<!-- 图片上传 -->
<template>

<!-- <el-button style="margin-top:250px;" type="danger" @click="dialogTableVisible = true">上传文件Dialog</el-button> -->

<!-- <el-dialog title="文件上传" v-model="dialogTableVisible"> -->

<el-upload
  class="upload-demo"
  ref="upload"
  action=""
  multiple="true"
  darg='true'
  :show-file-list="false"
  :on-remove="handleRemove"
  :on-change="handleChange"
  :auto-upload="false">
  <template #trigger>
    <el-button  size="small" type="primary">选取文件</el-button>
</template>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传到服务器</el-button>
  <template #tip>
    <div  class="el-upload__tip">上传文件不超过500kb</div>
  </template>


</el-upload>

<!-- 列表 -->
<el-table :data="tickList" style="width: 100%" class="table">


  <el-table-column prop="imgUrl" label="缩略图" >
    <template #default="scope">
      <el-image
      :src=this.previewPhoto(scope.row.type,scope.row.imgUrl)
      :fit='cover'
    />
    </template>
  </el-table-column>


  <el-table-column prop="name" :show-overflow-tooltip="true" label="名称" width="200">
    <template #default="scope">
      <i style="color:#409EFF" class=" el-icon-s-order" @click="fun(scope)">{{ scope.row.name }}</i>
    </template>
  </el-table-column>


  <el-table-column prop="type" label="类型" width="200" />

  <el-table-column width="120" prop="size" label="大小" />

  <el-table-column  width="180" :show-overflow-tooltip="true" label="功能">
    <template #default="scope">
      <el-button type="primary" size="mini" @click="deleteFile(scope.row)">删除</el-button>
    </template>
  </el-table-column>

</el-table>

<!-- 分页组件 -->
  <div class="block">

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pagenum"
      :page-sizes="[3, 5, 7]"
      :page-size='query.pagesize'
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total">
    </el-pagination>
  </div>
<!-- </el-dialog> -->


</template>


<script>


  export default {
    data() {
      return {
        query:{
          pagenum:1, //当前页码
          pagesize:3, //每页显示条数
          total:0
        },
        fileList: [],//文件列表
        dialogTableVisible:false,
        dataList:[],  //后端获取总数据
        tickList:[]   //当前页数据
      }
    },
    
    methods: {
      //检查token
      checktoken(){
        let token = localStorage.getItem('token')
        this.$axios({
          method:'post',
          url:'token',
          data:token,
          headers:{'Authorization': localStorage.getItem('token')}
        }).then(res=>{
          let {code,msg} = res.data
          if(code==401){
            this.$router.push({name:'login'})
            this.$message.error(msg)
          }

        })
      },

      //拼接base64图片
      previewPhoto(type, chunk){
				let imgURL = "data" + ":" + type + ";" + "base64," + chunk;
				return imgURL;
			},

      //获取后台数据
      async getList(){
        let {data} =await this.$axios.get('getlist')
        if(data.code ==200){
          this.dataList = data.files
          this.query.total = data.files.length
          this.getPageInfo()  //获取当前页数据

        }

      },
      //当前页数据
      getPageInfo(){
        //清空tickList中的数据
        this.tickList=[];
        // 获取当前页的数据
        for(let i=(this.query.pagenum-1)*this.query.pagesize;i<this.query.total;i++){
          //把遍历的数据添加到tickList里面
          this.tickList.push(this.dataList[i]);
          //判断是否达到一页的要求
          if(this.tickList.length===this.query.pagesize)break;
        }},

      // 发送post请求提交formdata
      upload(){
        let index=1
        const formData = new FormData();
          this.fileList.map(file=>{           
            formData.append(`file${index++}`,file)    //多文件上传避免覆盖     
          })
          this.$axios({
            method:'post',
            url:'upload',
            data:formData,
            headers:{
              'Content-Type': 'multipart/form-data',
              'Authorization': localStorage.getItem('token')   //获取token
            },
          }).then(res=>{
            let {code,msg} = res.data
            if(code=='200'){
        this.getList()

              this.$message.success(msg)
            }else{
              this.$message.error(msg)
              this.$router.push({name:'login'})
            }
          }).catch(err=>{
            this.$message.error(err)
          })
      },


      //删除后端列表的文件
      async deleteFile(row){
        console.log(row.id);
        let {data} = await this.$axios.post('deletefile',{id:row.id,filename:row.name})
        if(data.code == 200){
          this.getList()
          this.$message.success(data.msg)
        }else{
          this.getList()
          this.$message.error(data.msg)
        }
      },  


      //列表添加
      handleChange(file){
        file.raw.imgUrl = URL.createObjectURL(file.raw)
        this.fileList.push(file.raw)
      },
      //删除上传列表
      handleRemove(file) {
        this.fileList.splice(this.fileList.indexOf(file.raw),1)

      },
      //当页码或页面大小改变时触发回调
      handleSizeChange(newSize) {
        this.query.pagesize = newSize
        this.getPageInfo()

      },
      handleCurrentChange(newPage) {
        this.query.pagenum=newPage
        this.getPageInfo()

      }
      
    },
    mounted(){
      this.getList()
      this.checktoken()
    }
  }
</script>
<style scoped>
.table{
  height:calc(100vh - 180px)
}
</style>